<template>
    <div>
        <v-menu ref="menu1" v-model="menu1" :close-on-content-click="false" transition="scale-transition" offset-y
            max-width="290px" min-width="auto">
            <template v-slot:activator="{ on, attrs }">
                <v-text-field :value="dateFormatted" label="Date" hint="MM/DD/YYYY format" persistent-hint
                    prepend-icon="mdi-calendar" v-bind="attrs" @blur="date = parseDate(dateFormatted)"
                    v-on="on"></v-text-field>
            </template>
            <v-date-picker v-model="date" no-title @input="menu1 = false" locale="zh"></v-date-picker>
        </v-menu>
        <v-text-field v-model="message" label="输入消息"></v-text-field>
        <v-btn @click="SendMessage">发送给父组件</v-btn>
        <CustomInput v-model="lovingVue">这是啥啊</CustomInput>
    </div>
</template>

<script>
import CustomInput from './CustomInput.vue'
export default {
    components:{
        CustomInput
    },
    props: ['dateFormatted'],
    data() {
        return {
            message: '我是子组件',
            date: (new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).toISOString().substr(0, 10),
            menu1: false,
            menu2: false,
            lovingVue: "true"
        }
    },
    computed: {
        computedDateFormatted() {
            return this.formatDate(this.date)
        },
    },
    watch: {
        date(val) {
            // this.dateFormatted = this.formatDate(this.date)
            this.$emit('input', '', this.date);
        }
    },
    methods: {
        SendMessage() {
            this.$emit('input', this.message, this.date);
        },
        formatDate(date) {
            if (!date) return null

            const [year, month, day] = date.split('-')
            return `${month}/${day}/${year}`
        },
        parseDate(date) {
            if (!date) return null

            const [month, day, year] = date.split('/')
            return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
        },
    }
}
</script>